<!DOCTYPE html>
<html lang="en">
<head>
	<title>La Casa - Real Estate HTML5 Home Page Template</title>
	<meta charset="utf-8">
	<meta name="author" content="pixelhint.com">
	<meta name="description" content="La casa free real state fully responsive html5/css3 home page website template"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" /> 
	
	<link rel="stylesheet" type="text/css" href="css/signupin.css">
	
	<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="js/jquery.validate.js"></script>
	<script type="text/javascript" src="js/jquery.metadata.js"></script>
	<script type="text/javascript" src="js/resgin.js"></script>


	
	<script type="text/javascript">
	
	var previousVal = "";
	function vaildateEmail() {
        var label_for_email = $("label[for='email']");
        if($("#email").val() == $.trim("") ||
           (label_for_email.html() == $.trim("请输入邮箱")||
           label_for_email.html() == $.trim("邮箱有误")) &&
           label_for_email.css("display")=='block') {
           
            	label_for_email.css("color","red");
            	$("#getCode").attr("disabled",true);
           	    $("#getCode").css("background","#aaa");
            	
        } else if($("#email").val() == previousVal) {
        	
        } else {
        	ajaxVaildateEmail();
        }
		previousVal = $("#email").val();
		label_for_email.css("display","block");
		vaildateSubmit();
	}
	
	function ajaxVaildateEmail() {
		$.ajax({
            	data:"email="+$("#email").val(),
            	type:"GET",
            	dataType:'json',
            	url:"user/vaildateEmail.do",
            	error:function(data) {
            		alert("返回数据失败！");
            	},
            	success: function(data) {
            		if($.trim(data.msg)==$.trim("邮箱已被注册")) {
            			$("label[for='email']").html(data.msg).css("color","red");
            			$("label[for='email']").css("display","block");
            			
            			$("#getCode").attr("disabled",true);
            			$("#getCode").css("background","#aaa");
            		} else {
            			$("label[for='email']").html(data.msg).css("color","green");
            			$("label[for='email']").css("display","block");
            			
            			$("#getCode").removeAttr("disabled");
            			$("#getCode").css("background","rgb(99,209,169)");
            		}
               	 		 
            	}
        	});
	}
	
	var sent = false;
    function checkVerifyCode(form) {
    	if($("#verify_code").val() == $.trim("") || !sent) {
    		return false;
    	}
    	$.ajax({
            	data:"email_verifyCode="+$("#email").val()+"|"+$("#verify_code").val(),
            	type:"GET",
            	dataType:'json',
            	url:"user/checkVerifyCode.do",
            	error:function(data) {
            		alert("返回数据失败！");
            	},
            	success: function(data) {
            		if(data.msg=="match") {
            			$("#code_vaildate").html("验证码正确").css("color","green");
            			return true;
            		} else {
               	 		$("#code_vaildate").html("验证码错误").css("color","red"); 
               	 		return false;
               	 	}
            	}
        	});
        vaildateSubmit();
    }

    var countdown=60; 
	function setSendEmailTime(obj) { 
    	if (countdown == 0) { 
        	obj.removeAttribute("disabled");    
        	obj.value="Send";
        	$("#code_vaildate").html("");
        	$("#getCode").css("background","rgb(99,209,169)");
        	countdown = 60; 
        	return;
    	} else { 
        	obj.setAttribute("disabled", true); 
        	obj.value="Retry(" + countdown + ")"; 
        	countdown--; 
    	} 
		setTimeout(function() { 
    		setSendEmailTime(obj) }
    		,1000) 
	}

    function sendEmail(obj) {
    	$.ajax({
    			data:"email="+$("#email").val(),
            	type:"GET",
            	dataType:'json',
            	url:"user/sendEmail.do",
            	error:function(data) {
            		alert("返回数据失败！");
            	},
            	success: function(data) {
            		if(data.msg=="success") {
    					sent = true;
            			$("#code_vaildate").html("发送成功").css("color","green");
            			$("#getCode").css("background","#ccc");
            		} else {
            			$("#code_vaildate").html("发送失败").css("color","red");
            		}
            	}
        	});
    	setSendEmailTime(obj);
    }
    
    
    function vaildateSubmit() {
    	if($("label[for='email']").html()=="邮箱可注册" &&
    		$("#code_vaildate").html()=="验证码正确" &&
    		$("label[for='password']").css("display")=='none' ) {
    			$("#submit").css("background","rgb(99,209,169)");
    	} else {
    		$("#submit").css("background","#aaa");
    	}
    }
    

	</script>
</head>
<body>

	<section class="signupin">
	
		<div class="signupNav">
			<div id="label"><a href="index.html" style="color:#666666">&#60; Back to HomePage</a></div>
		</div>
		<div class="signup">
			<div id="logo">
				<img class="logo" src="img/1.0logo_vqfr2u.png"></img>
			</div>
			<p style="text-align:center;"><a style="font-size:12px">Find you new hone on YouFound</a></p>
			<div class="form_wrapper">
				<form id="emailSignupForm" method="post" action="user/register.do" onsubmit="return checkVerifyCode(this)" class="zcform">
					<p>
						<a id="email_signup"  style="font-size:16px; color:#4A90E2; cursor:pointer; float:left; 
						margin-bottom:10px; margin-left:22%;" href="phoneSignup.html">&#60; sign up with cellphone</a>
					</p>
					<p class="clearfix">
							<input
							id="email" name="email" class="required" value
							placeholder="Email" style="border-radius:5px;"
							onblur="vaildateEmail()" />
							<label for="email" generated="true" class="error" ></label><!-- style="display: none;" -->
							</label>
					</p>
					<p class="clearfix">
							<input id="verify_code" name="verify_code" class="identifying_code"
							type="text" value placeholder="Verification Code" style="border-radius:5px" onblur="checkVerifyCode(this)"/> 
							<input id="getCode" class="get_code" type="button" disabled="true" onclick="sendEmail(this)" 
							 value="Send" style="background:#aaa; font-size:16px; color:#FFF; border-radius:5px;" />
							<label id="code_vaildate"></label>
					</p>
					<p class="clearfix">
							<input
							id="password" name="password" type="password"
							class="{required:true,rangelength:[8,20],}" value
							placeholder="Your Password" style="border-radius:5px" onblur="vaildateSubmit()"/>
							<label for="password" generated="true" class="error"></label>
					</p>
					<p class="clearfix agreement">
						<input type="checkbox" /><b class="left"><a style="color: #666">Read and agreed</a><a href="#">《User Agreement》</a>
						</b>
					</p>
					<p class="clearfix">
						<input id="submit" class="submit" type="submit" value="Submit" style="background:#aaa; border-radius:5px;"/>
					</p>
					<p class="last">
						<a style="font-size:16px; color:#333 ">Aready a user?</a>
						<a href="signin.html" style="color:#4A90E2">Login</a>
					</p>
				</form>
			</div>
		</div>
		
	</section>
	<!--  end hero section  -->
	
</body>
</html>